<template>
  <div>
    <div class="quan">
      <div class="sousu">
        <span @click="tiao"
          ><van-icon name="arrow-left" @click="zhuan" />上海</span
        ><van-icon name="arrow-down" />&nbsp;&nbsp;&nbsp;|

        <span class="ziti">
          <van-icon name="search" class="search" />请输入小区或地址</span
        >
      </div>
      <van-icon name="thumb-circle-o" class="aaaa" />
    </div>
    <van-dropdown-menu>
      <van-dropdown-item title="区域" ref="item">
        <van-area :area-list="areaList" />

      </van-dropdown-item>
      <van-dropdown-item @confirm="fang" title="方式" ref="item">
        <van-picker :columns="columns"   @confirm="onConfirm"
  @cancel="onCancel"
  @change="onChange"/>

      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="item">
        <van-picker :columns="zujin" />
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item" @click="showPopup">
        <van-popup class="abc" position="right" :v-model="show">dhfibiundiubiunfiue</van-popup>

      </van-dropdown-item>
    </van-dropdown-menu>
<div v-for="(item,index) in list" :key="index">
    <van-card

  :price="item.price+'元/月'"
  :desc="item.desc"
  :title="item.title"
  :thumb="'http://liufusong.top:8080'+item.houseImg"
>
  <template #tags>
    <van-tag plain type="danger">{{item.tags.toString()}}</van-tag>

  </template>

</van-card>
</div>
  </div>
</template>

<script>
import { getHouses, getCityValue, getHouse } from '@/api/user'
export default {
  data () {
    return {
      show: true,
      activeCity: '',
      areaList: {
        province_list: {
          110000: '区域',
          120000: '地铁'
        },
        city_list: {
          110100: '北京市',
          120100: '天津市'
        },
        county_list: {
          110101: '东城区',
          110102: '西城区'
        }
      },
      columns: [],
      zujin: [],
      list: []
    }
  },
  async created () {
    console.log(localStorage.getItem('cityname'))
    const { body } = await getCityValue({
      name: localStorage.getItem('cityname')
    })
    console.log(body.value)
    this.activeCity = body.value
    const res = await getHouses({
      id: this.activeCity
    })
    const result = await getHouse()
    // console.log(result)
    this.list = result.body.list
    console.log(this.list)
    const Objstr = {}
    const substr = {}
    res.body.area.children.map((item) => item.label).forEach((item, index) => {
      Objstr[+'110000' + (index + 1) * 100] = item
    })
    res.body.subway.children.map((item) => item.label).forEach((item, index) => {
      substr[+'110000' + (index + 1) * 100] = item
    })
    this.areaList.city_list[0] = Objstr
    this.areaList.city_list = substr
    // this.areaList.city_list.county_list = Objstr.children
    // this.columns=
    // console.log(Objstr)

    this.columns = res.body.rentType.map(item => item.label)
    this.zujin = res.body.price.map(item => item.label)

    console.log(this.zujin)
  },
  methods: {
    onConfirm (value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange (picker, value, index) {
      // Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      // Toast('取消')
    },
    showPopup () {
      this.show = true
    },
    tiao () {
      this.$router.push('/citylist')
    },
    zhuan () {
      this.$router.back()
    },
    // onConfirm () {
    //   this.$refs.item.toggle()
    // },
    fang (a) {
      console.log(a)
    }
  }
}
</script>

<style>
.quan {
  width: 100%;
  height: 50px;
  background-color: rgb(33, 185, 122);
}
.sousu {
  position: fixed;
  top: 15px;
  left: 20px;
  width: 100%;
  height: 30px;
  margin-right: 50px;
  height: 30px;
  background-color: #fff;
  line-height: 30px;
}
.sousuo span {
  font-size: 14px;
}
.aaaa {
  position: fixed;
  top: 20px;
  right: 10px;
  font-size: 25px;
}
.qu {
top: 60%;
  right: 50%;
  width: 50%;
  /* bottom: 0; */

  background-color: #fff;
  color: rgb(33, 185, 122);
}
.ti {
  top: 60%;
  left: 50%;
  width: 50%;
  /* bottom: 0; */
}
</style>
